/**
 * Created by zzy on 2017/9/1.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    ScrollView,
    NativeModules,
    Platform,
    StyleSheet,
    DeviceEventEmitter,
    PixelRatio
} from 'react-native';
import MapView from 'react-native-amap';
import Constant from '../Contant'
import addressMgrStore from '../store/AddrMgrStore'
import SearchBox from '../component/SearchBox'
import {observable, action, computed, observe} from 'mobx'
import {observer} from 'mobx-react/native'
import PermissionAndroidUtil from '../../luojs/util/PermissionAndroidUtil'
import { NavigationActions } from 'react-navigation'

let AMapService = NativeModules.AMapService;
// 搜索框
const SearchBar = observer(({navigation}) => {
    return <View style={{marginHorizontal: 10, marginVertical: 5, flexDirection: 'row', alignItems: 'center'}}>
        <View style={styles.city}>
            <TouchableOpacity onPress={() => {
                navigation.navigate('CityChooser') ;
            }}>
                <Text>{addressMgrStore.mapAuto.city}</Text>
            </TouchableOpacity>
        </View>
        <View style={{flexGrow: 7}}>
            <SearchBox
                placeholder="搜索地址"
                onClick={()=>{
                    navigation.navigate('SearchAddress')
                }}/>
        </View>
    </View>
})
@observer
export default class CurrentAddr extends Component {
    @observable position = null;
    constructor(props){
        super(props);
        //addressMgrStore.refreshMyLocation();
        PermissionAndroidUtil.requestLocationPermission();
        this.position={
            latitude:addressMgrStore.activeAddress.latitude,
            longitude:addressMgrStore.activeAddress.longitude
        };
        if(this.props.navigation.state.params.position!=null){
            this.position=this.props.navigation.state.params.position;
        }
        if(this.position.latitude==null){
            this.position={
                latitude:39.928673,
                longitude:116.350687
            };
        }
    }
    render(){
        return <View style={{flex:1}}>
            <SearchBar
                navigation={this.props.navigation}/>
            <View style={{flex: 1}}>
                <View style={{
                    flexGrow: 2,
                    justifyContent: 'space-between',
                    flex: 1
                }}>
                <MapView
                    mode={1}
                    style={{flex: 1,
                        backgroundColor: Constant.GRAYBGCOLOR,
                        justifyContent: 'center',
                        alignItems: 'center'}}
                    onRegionChange={true}
                    showsUserLocation={true}
                    region={{latitude:this.position.latitude*1,longitude:this.position.longitude*1,zoom:100}}
                    >
                </MapView>
                </View>
                <Content navigation={this.props.navigation}/>
            </View>

        </View>
    }
    componentDidMount() {
        this.regionChangelistener =DeviceEventEmitter.addListener('onRegionChangeComplete',(poi)=>{
            this.onRegionChange(JSON.parse(poi))
            LOG('onRegionChangeComplete-------'+JSON.parse(poi))
           });
        // 地址搜索，点击后更新地图展示位置 事件监听
        this.updateMapListener = DeviceEventEmitter.addListener(Constant.CURRENTLOCATIONCHANGE, (poi)=>{
            this.position = {
                latitude:poi.point.latitude,
                longitude:poi.point.longitude
            }
        });
        }
    componentWillUnmount() {
        this.regionChangelistener.remove();
        this.updateMapListener.remove();
    }
    onRegionChange(region) {
        addressMgrStore.mapAuto.setMapRegion(region);
     }
    }
const Content = observer(({navigation}) => {
    return <View style={{flexGrow: 3, flex: 1}}>
        <ScrollView>
            {
                addressMgrStore.mapAuto.neighborList.map((poi, index) => {
                    return <CurrentAddrCell
                        poi={poi}
                        key={index}
                        click={() => {
                            //选择当前位置
                            //修改 activeAddress地址
                            let addrM = addressMgrStore.mapAuto.convertPOI2Address(poi);
                            addressMgrStore.mapAuto.setTempPoi(addrM);
                            addressMgrStore.setSelected(addrM);
                            addressMgrStore.mapAuto.setMapRegion(addrM);
                            // 返回
                            {/*const resetAction = NavigationActions.reset({*/}
                                {/*index: 0,*/}
                                {/*actions: [*/}
                                    {/*NavigationActions.navigate({ routeName: 'Root'})*/}
                                {/*]*/}
                            {/*});*/}
                            {/*navigation.dispatch(resetAction);*/}
                            navigation.goBack();
                        }}/>
                })
            }
        </ScrollView>
    </View>
})

const CurrentAddrCell = ({poi, click}) => {
    let { address, name} = poi;
    return <TouchableOpacity onPress={click}
                             style={[{padding: 10, backgroundColor: '#fff'}, styles.borderBottom]}>
        <Text style={{color: Constant.TEXTTITLECOLOR, fontSize: 14, paddingVertical: 4}}>{name}</Text>
        <Text style={{color: Constant.TEXTCONTENTCOLOR, fontSize: 12}}>{address}</Text>
    </TouchableOpacity>
}
const styles = {
    borderBottom: {
        borderBottomColor: Constant.SEPLINECOLOR,
        borderBottomWidth: 1 / PixelRatio.get()
    },
    city: {
        flexGrow: 1,
        backgroundColor: '#fff',
        height: Platform.OS === 'ios' ? 35 : 45,
        alignItems: 'center',
        justifyContent: 'center',
        borderRightColor: Constant.SEPLINECOLOR,
        borderRightWidth: StyleSheet.hairlineWidth
    },
    map: {
        flex: 1,
        backgroundColor: Constant.GRAYBGCOLOR,
        justifyContent: 'center',
        alignItems: 'center'
    },
    centerCircle: {
        backgroundColor: 'rgba(255,215,0,1)',
        justifyContent: 'center',
        alignItems: 'center',
        width: 24,
        height: 24,
        borderRadius: 12,
        borderWidth: 2,
        borderColor: Constant.BLUECOLOR
    },
    mapMarker: {
        position: 'absolute',
        width: 30,
        height: 30,
        borderRadius: 15,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#00000000',
        bottom: 15,
        left: 15

    }
}